<template>
  <div class="wrap">
    <div class="cont-group border-bottom">
        <h3 class="title">热销推荐</h3>
        <div class="cont" v-for="item of list" :key="item.id">
            <div class="pic">
                <img class="pic-img" :src="item.imgUrl" alt="">
            </div>
            <div class="info">
                <p class="info-title">{{ item.title }}</p>
                <p class="info-desc">{{ item.desc }}</p>
                <button class="info-more">查看详情</button>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
    .cont-group
        .title
            padding .2rem 0 .2rem .1rem
            background #eee
        .cont
            display flex
            width 100%
            .pic
                width 2rem
                padding .2rem
                .pic-img
                    width 100%
            .info
                flex 1
                padding .2rem
                .info-title
                    font-size .3rem
                    font-weight 700
                    padding-bottom .2rem
                .info-desc
                    font-size .1rem
                    color #ccc
                    padding-bottom .2rem
                .info-more
                    padding .1rem .2rem
                    background orange
                    color #fff
                    border-radius .15rem
                    font-size .2rem
</style>
